// src/pages/personal/widgets/birthday/index.tsx
import styles from "@pages/personal/styles/styles.module.less";
import GeekIcon from "@shared/geekIcon";
import { DatePicker } from "antd-mobile";
import { useEffect, useState } from "react";
import dayjs from "dayjs";
import { useUpdateProfileMutation } from "@service/user";
import Loading from "@shared/loading";
import toast from "react-hot-toast";
interface Props {
  birthday: string;
}

export default function Birthday({ birthday }: Props) {
     // 用于控制生日日期选择组件的渲染与销毁
  const [visible, setVisible] = useState(false);
  // 用于修改用户资料
  const [updateProfile, { isSuccess, isLoading }] = useUpdateProfileMutation();

  // 监听用户生日是否修改成功
  useEffect(() => {
    // 修改成功
    if (isSuccess) {
      // 用户提示
      toast.success("用户生日修改成功");
      // 销毁生日日期选择组件
      setVisible(false);
    }
  }, [isSuccess, setVisible]);
  return (
    <li>
      <span>生日</span>
      <div className={styles.value} onClick={() => setVisible(true)}>
        <span>{birthday}</span>
        <GeekIcon type="iconbtn_right" className={styles.icon} />
      </div>
      <DatePicker
        title="选择生日"
        visible={visible}
        onClose={() => setVisible(false)}
        defaultValue={dayjs(birthday).toDate()}
        max={new Date()}
        min={new Date(1900, 0, 1, 0, 0, 0)}
        onConfirm={(date) =>
          updateProfile({ birthday: dayjs(date).format("YYYY-MM-DD") })
        }
      />
      {isLoading && <Loading />}
    </li>
  );
}